<template>
  <div class="contact">
    <div class="contact-header">
      <h1>联系我</h1>
      <p class="subtitle">让我们开始一段愉快的对话</p>
    </div>

    <div class="contact-content">
      <div class="contact-card">
        <div class="contact-info">
          <div class="info-item">
            <i class="icon">📍</i>
            <div class="info-text">
              <h3>地址</h3>
              <p>{{ basic.location }}</p>
            </div>
          </div>
          <div class="info-item">
            <i class="icon">📧</i>
            <div class="info-text">
              <h3>邮箱</h3>
              <p><a :href="`mailto:${basic.email}`">{{ basic.email }}</a></p>
            </div>
          </div>
          <div class="info-item">
            <i class="icon">💼</i>
            <div class="info-text">
              <h3>职位</h3>
              <p>{{ basic.title }}</p>
            </div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="social-links">
          <h2>社交媒体</h2>
          <a 
            v-for="(link, platform) in social" 
            :key="platform"
            :href="link"
            target="_blank"
            class="social-link"
          >
            <i class="icon">{{ getSocialIcon(platform) }}</i>
            <span>{{ platform }}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { siteConfig } from '../config/site'

const basic = ref(siteConfig.basic)
const social = ref(siteConfig.social)

const getSocialIcon = (platform) => {
  const icons = {
    github: '📦',
    linkedin: '💼',
    blog: '📝'
  }
  return icons[platform] || '🔗'
}
</script>

<style lang="scss" scoped>
.contact {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;

  .contact-header {
    text-align: center;
    margin-bottom: 4rem;

    h1 {
      font-size: 3rem;
      color: var(--primary-color);
      margin-bottom: 1rem;
      font-weight: 800;
      letter-spacing: -1px;
    }

    .subtitle {
      font-size: 1.5rem;
      color: var(--text-color);
      opacity: 0.8;
      max-width: 600px;
      margin: 0 auto;
    }
  }
}

.contact-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}

.contact-card {
  background: rgba(var(--background-color-rgb), 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 3rem;
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;

  .info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--background-color);
    border-radius: 20px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      border-color: var(--primary-color);
    }

    .icon {
      font-size: 2rem;
      color: var(--primary-color);
    }

    .info-text {
      h3 {
        font-size: 1.4rem;
        color: var(--text-color);
        margin-bottom: 0.5rem;
      }

      p {
        font-size: 1.2rem;
        color: var(--text-color);
        opacity: 0.8;

        a {
          color: var(--text-color);
          text-decoration: none;
          transition: color 0.3s ease;

          &:hover {
            color: var(--primary-color);
          }
        }
      }
    }
  }
}

.divider {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(var(--primary-color-rgb), 0.2),
    transparent
  );
  margin: 3rem 0;
}

.social-links {
  h2 {
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 2rem;
    text-align: center;
  }

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;

  .social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--background-color);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    border-radius: 15px;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      border-color: var(--primary-color);
      background: rgba(var(--primary-color-rgb), 0.1);
    }

    .icon {
      font-size: 1.5rem;
    }

    span {
      font-size: 1.2rem;
      color: var(--text-color);
    }
  }
}

@media (max-width: 768px) {
  .contact {
    padding: 40px 1rem;

    .contact-header {
      margin-bottom: 3rem;

      h1 {
        font-size: 2.2rem;
      }

      .subtitle {
        font-size: 1.2rem;
      }
    }
  }

  .contact-card {
    padding: 2rem;
    margin: 1rem;
  }

  .contact-content {
    gap: 2rem;
  }

  .contact-info {
    .info-item {
      padding: 1.5rem;

      .icon {
        font-size: 1.8rem;
      }

      .info-text {
        h3 {
          font-size: 1.2rem;
        }

        p {
          font-size: 1.1rem;
        }
      }
    }
  }
}
</style> 